﻿<Window x:Class="PasswordProvider.View.HelpReader"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:view="clr-namespace:PasswordProvider.View"
    xmlns:theme="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
    Title="Password Provider Help" Height="617" Width="519" ResizeMode="CanResize"
    ShowInTaskbar="True" WindowStyle="None" AllowsTransparency="True" Background="Transparent" 
    >
    <Window.Resources>
        
        <view:BoolToVisibilityEnumValueConverter x:Key="boolToVisibilityConverter" />
        
        <!-- Go Back Button Template -->
        <ControlTemplate x:Key="goBackButtonTemplate" TargetType="{x:Type Button}">
            <Grid Width="12" Height="12">
                <Ellipse Name="ellipse" Margin="-1" Fill="Transparent" />
                <Path Name="path" 
                      Data="M 0 6 L 9 2 L 9 10 Z" StrokeStartLineCap="Triangle" StrokeEndLineCap="Triangle"                          
                      Fill="White"
                      />                
            </Grid>            
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="ellipse" Property="Fill" Value="YellowGreen" />
                    <Setter TargetName="ellipse" Property="BitmapEffect">
                        <Setter.Value>
                            <OuterGlowBitmapEffect GlowColor="YellowGreen" GlowSize="7" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="ellipse" Property="Fill" Value="Green" />
                    <Setter TargetName="ellipse" Property="BitmapEffect">
                        <Setter.Value>
                            <OuterGlowBitmapEffect GlowColor="Green" GlowSize="7"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </ControlTemplate.Triggers>            
        </ControlTemplate>

        <!-- Go Forward Button Template -->
        <ControlTemplate x:Key="goForwardButtonTemplate" TargetType="{x:Type Button}">
            <Grid Width="12" Height="12">
                <Ellipse Name="ellipse" Margin="-1" Fill="Transparent" />
                <Path Name="path"
                      Data="M 3 2 L 12 6 L 3 10 Z" StrokeStartLineCap="Triangle" StrokeEndLineCap="Triangle"                          
                      Fill="White"/>            
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="ellipse" Property="Fill" Value="YellowGreen" />
                    <Setter TargetName="ellipse" Property="BitmapEffect">
                        <Setter.Value>
                            <OuterGlowBitmapEffect GlowColor="YellowGreen" GlowSize="7" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="ellipse" Property="Fill" Value="Green" />
                    <Setter TargetName="ellipse" Property="BitmapEffect">
                        <Setter.Value>
                            <OuterGlowBitmapEffect GlowColor="Green" GlowSize="7"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

        <!-- Show Contents Selector Button Template -->
        <ControlTemplate x:Key="contentsButtonTemplate" TargetType="{x:Type Button}">
            <Grid>
                <Ellipse Margin="-1" Name="ellipse" Fill="#f0000000" />
                <Viewbox Name="viewbox" Margin="1">
                    <Path Name="path" HorizontalAlignment="Center" VerticalAlignment="Center" 
                          Data="M 0 0 L 7 10 L 14 0 Z" StrokeStartLineCap="Triangle" StrokeEndLineCap="Triangle"                          
                          Fill="White"/>
                </Viewbox>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="ellipse" Property="Fill" Value="Orange" />
                    <Setter TargetName="ellipse" Property="BitmapEffect">
                        <Setter.Value>
                            <OuterGlowBitmapEffect GlowColor="Orange" GlowSize="7" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="ellipse" Property="Fill" Value="DarkOrange" />
                    <Setter TargetName="ellipse" Property="BitmapEffect">
                        <Setter.Value>
                            <OuterGlowBitmapEffect GlowColor="DarkOrange" GlowSize="7"/>
                        </Setter.Value>
                    </Setter>

                </Trigger>

            </ControlTemplate.Triggers>
        </ControlTemplate>
        
        <!-- Close Help Window Button Template -->
        <ControlTemplate x:Key="closeButtonTemplate" TargetType="{x:Type Button}">
            <Grid>
                <Ellipse Margin="-1" Name="ellipse" Fill="#f0000000" />
                <Viewbox Name="viewbox" Margin="2">
                    <Path Name="path" 
                          HorizontalAlignment="Center" VerticalAlignment="Center" 
                          Data="M 0 0 L 10 10 M 10 0 L 0 10"
                          StrokeStartLineCap="Triangle"
                          StrokeEndLineCap="Triangle"
                          Stroke="White"                                           
                          StrokeThickness="3" />
                </Viewbox>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="ellipse" Property="Fill" Value="Red" />
                    <Setter TargetName="ellipse" Property="BitmapEffect">
                        <Setter.Value>
                            <OuterGlowBitmapEffect GlowColor="Red" GlowSize="7" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="ellipse" Property="Fill" Value="DarkRed" />
                    <Setter TargetName="ellipse" Property="BitmapEffect">
                        <Setter.Value>
                            <OuterGlowBitmapEffect GlowColor="DarkRed" GlowSize="7"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        
        <Style TargetType="Thumb">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Thumb">
                        <Grid Height="12" Width="12" Background="Transparent" SnapsToDevicePixels="true">
                            <Path Stroke="Gray" StrokeThickness="3" StrokeStartLineCap="Round" StrokeEndLineCap="Round" Data="m 0,8 L 8,8 L 8,0" />
                            
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Window.Resources>
    
    <Window.Template>
        <ControlTemplate TargetType="Window"> 
            <!-- This border, with padding, is to make it appear as if the outer glow bitmap is 
                around the outside of the window, the effect doesn't show up outside the true bounds of the window-->
            <Border Background="Transparent" Padding="20">
                <Border Name="DropShadowBorder" BorderThickness="0.6" BorderBrush="Black"  CornerRadius="5"  
                        Background="{TemplateBinding BorderBrush}"
                        MouseLeftButtonDown="HandleDragRequest">
                    <Border.Effect>
                        <DropShadowEffect BlurRadius="10" Color="Black" ShadowDepth="0" />
                    </Border.Effect>

                    <Grid>
                        <Thumb HorizontalAlignment="Right" Margin="0,0,1,1"
                               VerticalAlignment="Bottom" 
                               Cursor="SizeNWSE"  
                               DragDelta="Thumb_DragDelta"/>
                        <Border      
                            Background="{DynamicResource WindowBrush}" 
                            BorderBrush="Gray" BorderThickness="0.6"
                            Margin="7,27,7,7" 
                            MouseLeftButtonDown="HandleDragRequest">
                                <TextBlock Margin="29,-22,0,0" 
                                           HorizontalAlignment="Left" VerticalAlignment="Top" 
                                           Foreground="{TemplateBinding Foreground}"
                                   Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}, Path=Title}" />
                            
                        </Border>

                        <!-- Button to show the contents list box -->
                        <Button Name="contentsButton" Margin="0,8,30,0" Width="12" Height="12" 
                                HorizontalAlignment="Right" VerticalAlignment="Top" 
                                Template="{StaticResource contentsButtonTemplate}"
                                ToolTip="Contents"/>
                        
                        <!-- Button to close the window -->
                        <Button Margin="0,8,10,0" Width="12" Height="12" 
                                HorizontalAlignment="Right" VerticalAlignment="Top" 
                                Click="HandleCloseRequest" Template="{StaticResource closeButtonTemplate}"
                                ToolTip="Close"/>
                        
                        <!-- Frame to contain navigatible flow document -->
                        <Frame Name="_frame" Margin="7,27,7,7" NavigationUIVisibility="Hidden">
                            <Frame.Content>
                                <FlowDocumentPageViewer Name="_viewer" Opacity="1"/>
                            </Frame.Content>
                        </Frame>

                        <!-- Button to navigate back -->
                        <Button Name="_navigateBackButton" Margin="7,8,0,0" Content="&lt;" 
                                HorizontalAlignment="Left" VerticalAlignment="Top" 
                                Visibility="{Binding ElementName=_frame, Path=CanGoBack, Converter={StaticResource boolToVisibilityConverter}, Mode=OneWay}"
                                Template="{StaticResource goBackButtonTemplate}"
                                Click="_navigateBackButton_Click"/>

                        <!-- Button to navigate forward -->
                        <Button Name="_navigateForwardButton" Margin="19,8,0,0" Content="&gt;" 
                                HorizontalAlignment="Left" VerticalAlignment="Top" 
                                Visibility="{Binding ElementName=_frame, Path=CanGoForward, Converter={StaticResource boolToVisibilityConverter}, Mode=OneWay}"
                                Template="{StaticResource goForwardButtonTemplate}"
                                Click="_navigateForwardButton_Click"/>

                        <!-- Border around the contents list box, using this primarily for corner radius -->
                        <Border Name="_contentsBorder" Margin="0,27,28,0" Height="0"
                                HorizontalAlignment="Right" VerticalAlignment="Top"
                                BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="4" 
                                CornerRadius="0,0,5,5">
                            
                            
                            <ListBox Name="_contentsListBox"                   
                                     BorderThickness="0"
                                     ScrollViewer.VerticalScrollBarVisibility="Disabled" 
                                     ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                                     HorizontalContentAlignment="Right"
                                     Padding="0,0,5,0"
                                     SizeChanged="_contentsListBox_SizeChanged"
                                     SelectionChanged="_contentsListBox_SelectionChanged">
                                <ListBoxItem Tag="About">About</ListBoxItem>
                                <ListBoxItem Tag="Welcome">Welcome Screen</ListBoxItem>
                                <ListBoxItem Tag="SetPassword">Setting the Password</ListBoxItem>
                                <ListBoxItem Tag="EnterPassword">Authenticating the User</ListBoxItem>
                                <ListBoxItem Tag="SitesList">Site List View</ListBoxItem>
                                <ListBoxItem Tag="SiteDetails">Site Details View</ListBoxItem>
                                <ListBoxItem Tag="FileActions">File Actions</ListBoxItem>
                                <ListBoxItem Tag="ViewOptions">View Options</ListBoxItem>
                                <ListBoxItem Tag="SecurityOptions">Security Options</ListBoxItem>
                                <ListBoxItem Tag="BrowserOptions">Browser Options</ListBoxItem>
                                <ListBoxItem Tag="Tips">Tips</ListBoxItem>
                                <ListBoxItem Tag="SecurityOverview">Security Overview</ListBoxItem>
                            </ListBox>
                        </Border>
                        
                        <Grid.Triggers>
                            <!-- Trigger to show the contents list box when button is clicked -->
                            <EventTrigger SourceName="contentsButton" RoutedEvent="Button.Click">
                                <BeginStoryboard>
                                    <Storyboard Storyboard.TargetName="_contentsBorder" Storyboard.TargetProperty="Height">
                                        <DoubleAnimation To="208" Duration="0:0:0.2" />
                                    </Storyboard>
                                </BeginStoryboard>
                                <BeginStoryboard>
                                    <Storyboard Storyboard.TargetName="_frame" Storyboard.TargetProperty="Opacity">
                                        <DoubleAnimation To=".3" Duration="0:0:0.2" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            
                            <!-- Trigger to close the list box when a selection is made -->
                            <EventTrigger SourceName="_contentsListBox" RoutedEvent="ListBox.SelectionChanged">
                                <BeginStoryboard>
                                    <Storyboard Storyboard.TargetName="_contentsBorder" Storyboard.TargetProperty="Height" BeginTime="0:0:0.2">
                                        <DoubleAnimation To="0" Duration="0:0:0" />
                                    </Storyboard>
                                </BeginStoryboard>
                                <BeginStoryboard>
                                    <Storyboard Storyboard.TargetName="_frame" Storyboard.TargetProperty="Opacity">
                                        <DoubleAnimation To="1" Duration="0:0:0" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            
                            <!-- Trigger to close the list box when it looses focus, 
                                works in conjunction with size changed event handler in code 
                                which sets focus on the contents list box when it is becoming visible -->
                            <EventTrigger SourceName="_contentsListBox" RoutedEvent="ListBox.LostFocus">
                                <BeginStoryboard>
                                    <Storyboard Storyboard.TargetName="_contentsBorder" Storyboard.TargetProperty="Height" BeginTime="0:0:0.2">
                                        <DoubleAnimation To="0" Duration="0:0:0" />
                                    </Storyboard>
                                </BeginStoryboard>
                                <BeginStoryboard>
                                    <Storyboard Storyboard.TargetName="_frame" Storyboard.TargetProperty="Opacity">
                                        <DoubleAnimation To="1" Duration="0:0:0" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </Grid.Triggers>
                        
                    </Grid>

                </Border>
                
            </Border>
                

            <ControlTemplate.Triggers>
                <Trigger Property="Window.IsActive" Value="true">
                    <Setter TargetName="DropShadowBorder" Property="Border.Effect">
                        <Setter.Value>
                            <DropShadowEffect BlurRadius="20" Color="Black" ShadowDepth="0" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
                         
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Template>
    
</Window>
